<template>
  <div class="container">
<NavView/>
    <el-container>
      <!-- 左侧导航栏 -->

      <el-aside width="220px">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical"
          @select="handleSelect"
        >
          <el-menu-item index="1-1">
            <span>新品列表</span>
            <span class="active-arrow" v-if="activeIndex === '1-1'"></span>
          </el-menu-item>
          <el-menu-item index="1-2">
            <span>男士列表</span>
            <span class="active-arrow" v-if="activeIndex === '1-2'"></span>
          </el-menu-item>
          <el-menu-item index="2-1">
            <span>女士列表</span>
            <span class="active-arrow" v-if="activeIndex === '2-1'"></span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区 -->
      <el-main>
        <component :is="components[activeIndex]" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import NewList from './components/NewList.vue';
import ManList from './components/ManList.vue';
import WomanList from './components/WomanList.vue';

import NavView from '../components/NavView.vue';
const activeIndex = ref('1-1');

const components = {
  '1-1': NewList,
  '1-2': ManList,
  '2-1': WomanList,
};

const handleSelect = (index) => {
  activeIndex.value = index;
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column; /* 关键修改1：改为垂直布局 */
}

.el-menu-vertical {
  height: 100%;

  .el-menu-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .active-arrow {
      display: inline-block;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 6px solid #409EFF; /* 使用Element Plus的主题色 */

    }
  }
}

.el-aside {
  background-color: #f5f7fa;
}

.el-main {
  padding: 20px;
  background-color: #ffffff;
}
</style>
